<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:include="base/head.html::static">
<title>个人信息</title>
</head>
  
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar" th:include="base/base.html::left"></aside>

    <!--头部信息-->
    <header class="lyear-layout-header" th:include="base/base.html::header"></header>
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                
                <div class="edit-avatar">
                  <img th:src="@{/images/users/avatar.jpg}" alt="..." class="img-avatar">
                  <div class="avatar-divider"></div>
                  <div class="edit-avatar-content">
                    <button class="btn btn-default">修改头像</button>
                    <p class="m-0">选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>
                  </div>
                </div>
                <hr>
                <form method="post" action="#!" class="site-form">
                  <div class="form-group">
                    <label for="userNum">学号</label>
                    <input th:value="${session.user.userNum}"  type="text" class="form-control" name="userNum" id="userNum" disabled="disabled" />
                  </div>
                  <div class="form-group">
                    <label for="realName">名字</label>
                    <input type="text" class="form-control" name="realName" id="realName" placeholder="输入您的昵称" th:value="${session.user.realName}">
                  </div>

                  <div class="form-group">
                    <label for="sex">性别</label>
                    <div class="example-box" id="sex">
                      <label th:if="${session.user.sex == 0}" class="lyear-radio radio-inline radio-primary">
                        <input type="radio"   th:value="0" name="sex" checked><span>男</span>
                      </label>
                      <label th:if="${session.user.sex == 1}" class="lyear-radio radio-inline radio-primary" >
                        <input type="radio"   th:value="0" name="sex"><span>男</span>
                      </label>
                      <label th:if="${session.user.sex == 1}" class="lyear-radio radio-inline radio-primary">
                        <input  type="radio"  th:value="1" name="sex" checked><span>女</span>
                      </label>
                      <label th:if="${session.user.sex == 0}" class="lyear-radio radio-inline radio-primary" >
                        <input  type="radio"  th:value="1" name="sex"><span>女</span>
                      </label>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="className">班级</label>
                    <input type="text" class="form-control" name="className" id="className" placeholder="输入您的班级名字" th:value="${session.user.className}">
                  </div>
                  <div class="form-group">
                  <label for="phoneNu">电话</label>
                  <input type="text" class="form-control" name="phoneNu" id="phoneNu" placeholder="请输入正确的手机号码" th:value="${session.user.phoneNu}">
                </div>
                  <button type="button" onclick="saveInfo()" class="btn btn-primary">保存</button>
                </form>
       
              </div>
            </div>
          </div>
          
        </div>
        
      </div>
      
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
</body>
<script>
  var saveInfo=function () {
    var userNum=$("#userNum").val();
    var realName=$("#realName").val();
    /*jquery 根据属性状态选择属性值*/
    var sex=$("input[type='radio']:checked").val();
    var className=$("#className").val();
    var phoneNu=$("#phoneNu").val();
    axios({
      method : 'put',
      url : '/user/info/',
      data: {
        realName:realName,
        userNum : userNum,
        sex:sex,
        className:className,
        phoneNu : phoneNu
      }
    }).then(function (response) {
      alert(response.data);
    });
  }

</script>
</html>